/**
 * 模拟设计方案数据
 */

import { DesignSchema } from './types';

export const getMockDesigns = (): DesignSchema[] => [
  {
    id: 'design-1',
    title: '简洁欢迎页',
    description: '单列居中布局，适合欢迎页和启动页',
    schema: {
      componentName: 'Page',
      id: 'page_welcome',
      props: {
        ref: 'outerView',
        style: { height: '100%' },
      },
      children: [
        {
          componentName: 'FDPage',
          id: 'fd_page_welcome',
          props: {
            minHeight: '100vh',
            contentProps: {
              style: {
                height: '100%',
              },
            },
          },
          children: [
            {
              componentName: 'FDSection',
              id: 'fd_section_welcome',
              props: {
                style: {
                  backgroundColor: '#f5f5f5',
                  height: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
              },
              children: [
                {
                  componentName: 'FDBlock',
                  id: 'fd_block_welcome',
                  props: {
                    mode: 'transparent',
                    span: 12,
                  },
                  children: [
                    {
                      componentName: 'FDCell',
                      id: 'fd_cell_welcome',
                      props: {
                        align: 'center',
                        style: {
                          padding: '40px',
                        },
                      },
                      children: [
                        {
                          componentName: 'FDP',
                          id: 'fd_p_welcome_title',
                          props: {},
                          children: [
                            {
                              componentName: 'NextText',
                              id: 'text_welcome_title',
                              props: {
                                type: 'h1',
                                children: '欢迎使用低代码平台',
                                style: {
                                  fontSize: '36px',
                                  marginBottom: '20px',
                                },
                              },
                            },
                          ],
                        },
                        {
                          componentName: 'FDP',
                          id: 'fd_p_welcome_desc',
                          props: {},
                          children: [
                            {
                              componentName: 'NextText',
                              id: 'text_welcome_desc',
                              props: {
                                type: 'body1',
                                children: '快速搭建企业级应用',
                                style: {
                                  fontSize: '18px',
                                  color: '#666',
                                },
                              },
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    id: 'design-2',
    title: '标准表单页',
    description: '标准表单布局，适合数据录入',
    schema: {
      componentName: 'Page',
      id: 'page_form',
      props: {
        ref: 'outerView',
        style: { height: '100%' },
      },
      children: [
        {
          componentName: 'FDPage',
          id: 'fd_page_form',
          props: {
            minHeight: '100vh',
            contentProps: {
              style: {
                height: '100%',
              },
            },
          },
          children: [
            {
              componentName: 'FDSection',
              id: 'fd_section_form',
              props: {
                style: {
                  backgroundColor: '#f0f0f0',
                  height: '100%',
                  padding: '20px',
                },
              },
              children: [
                {
                  componentName: 'FDBlock',
                  id: 'fd_block_form',
                  props: {
                    mode: 'procard',
                    span: 12,
                  },
                  children: [
                    {
                      componentName: 'FDCell',
                      id: 'fd_cell_form',
                      props: {
                        style: {
                          backgroundColor: '#fff',
                          padding: '20px',
                        },
                      },
                      children: [
                        {
                          componentName: 'FDP',
                          id: 'fd_p_form_title',
                          props: {},
                          children: [
                            {
                              componentName: 'NextText',
                              id: 'text_form_title',
                              props: {
                                type: 'h3',
                                children: '信息录入表单',
                                style: {
                                  marginBottom: '20px',
                                },
                              },
                            },
                          ],
                        },
                        {
                          componentName: 'FDP',
                          id: 'fd_p_form_desc',
                          props: {},
                          children: [
                            {
                              componentName: 'NextText',
                              id: 'text_form_desc',
                              props: {
                                type: 'body1',
                                children: '请在此处添加表单组件',
                                style: {
                                  color: '#999',
                                },
                              },
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    id: 'design-3',
    title: '双列卡片布局',
    description: '双列卡片布局，适合内容展示',
    schema: {
      componentName: 'Page',
      id: 'page_cards',
      props: {
        ref: 'outerView',
        style: { height: '100%' },
      },
      children: [
        {
          componentName: 'FDPage',
          id: 'fd_page_cards',
          props: {
            minHeight: '100vh',
            contentProps: {
              style: {
                height: '100%',
              },
            },
          },
          children: [
            {
              componentName: 'FDSection',
              id: 'fd_section_cards',
              props: {
                style: {
                  backgroundColor: '#f0f0f0',
                  height: '100%',
                  padding: '20px',
                },
              },
              children: [
                {
                  componentName: 'FDBlock',
                  id: 'fd_block_cards',
                  props: {
                    mode: 'transparent',
                    span: 12,
                  },
                  children: [
                    {
                      componentName: 'FDRow',
                      id: 'fd_row_cards',
                      props: {},
                      children: [
                        {
                          componentName: 'FDCell',
                          id: 'fd_cell_card1',
                          props: {
                            style: {
                              backgroundColor: '#fff',
                              padding: '20px',
                              marginBottom: '20px',
                            },
                            width: '50%',
                          },
                          children: [
                            {
                              componentName: 'FDP',
                              id: 'fd_p_card1',
                              props: {},
                              children: [
                                {
                                  componentName: 'NextText',
                                  id: 'text_card1',
                                  props: {
                                    type: 'h4',
                                    children: '卡片 1',
                                  },
                                },
                              ],
                            },
                          ],
                        },
                        {
                          componentName: 'FDCell',
                          id: 'fd_cell_card2',
                          props: {
                            style: {
                              backgroundColor: '#fff',
                              padding: '20px',
                              marginBottom: '20px',
                            },
                            width: '50%',
                          },
                          children: [
                            {
                              componentName: 'FDP',
                              id: 'fd_p_card2',
                              props: {},
                              children: [
                                {
                                  componentName: 'NextText',
                                  id: 'text_card2',
                                  props: {
                                    type: 'h4',
                                    children: '卡片 2',
                                  },
                                },
                              ],
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    id: 'design-4',
    title: '数据仪表盘',
    description: '三列指标展示，适合数据统计',
    schema: {
      componentName: 'Page',
      id: 'page_dashboard',
      props: {
        ref: 'outerView',
        style: { height: '100%' },
      },
      children: [
        {
          componentName: 'FDPage',
          id: 'fd_page_dashboard',
          props: {
            minHeight: '100vh',
            contentProps: {
              style: {
                height: '100%',
              },
            },
          },
          children: [
            {
              componentName: 'FDSection',
              id: 'fd_section_dashboard',
              props: {
                style: {
                  backgroundColor: '#f0f0f0',
                  height: '100%',
                  padding: '20px',
                },
              },
              children: [
                {
                  componentName: 'FDBlock',
                  id: 'fd_block_dashboard',
                  props: {
                    mode: 'transparent',
                    span: 12,
                  },
                  children: [
                    {
                      componentName: 'FDRow',
                      id: 'fd_row_dashboard',
                      props: {},
                      children: [
                        {
                          componentName: 'FDCell',
                          id: 'fd_cell_metric1',
                          props: {
                            align: 'center',
                            style: {
                              backgroundColor: '#fff',
                              padding: '30px',
                            },
                            width: '33.33%',
                          },
                          children: [
                            {
                              componentName: 'FDP',
                              id: 'fd_p_metric1',
                              props: {},
                              children: [
                                {
                                  componentName: 'NextText',
                                  id: 'text_metric1',
                                  props: {
                                    type: 'h2',
                                    children: '1,234',
                                    style: {
                                      fontSize: '32px',
                                      color: '#1890ff',
                                    },
                                  },
                                },
                              ],
                            },
                          ],
                        },
                        {
                          componentName: 'FDCell',
                          id: 'fd_cell_metric2',
                          props: {
                            align: 'center',
                            style: {
                              backgroundColor: '#fff',
                              padding: '30px',
                            },
                            width: '33.33%',
                          },
                          children: [
                            {
                              componentName: 'FDP',
                              id: 'fd_p_metric2',
                              props: {},
                              children: [
                                {
                                  componentName: 'NextText',
                                  id: 'text_metric2',
                                  props: {
                                    type: 'h2',
                                    children: '5,678',
                                    style: {
                                      fontSize: '32px',
                                      color: '#52c41a',
                                    },
                                  },
                                },
                              ],
                            },
                          ],
                        },
                        {
                          componentName: 'FDCell',
                          id: 'fd_cell_metric3',
                          props: {
                            align: 'center',
                            style: {
                              backgroundColor: '#fff',
                              padding: '30px',
                            },
                            width: '33.33%',
                          },
                          children: [
                            {
                              componentName: 'FDP',
                              id: 'fd_p_metric3',
                              props: {},
                              children: [
                                {
                                  componentName: 'NextText',
                                  id: 'text_metric3',
                                  props: {
                                    type: 'h2',
                                    children: '9,012',
                                    style: {
                                      fontSize: '32px',
                                      color: '#faad14',
                                    },
                                  },
                                },
                              ],
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  },
];
